<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人中心</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<!-- 视口标签，禁止用户在移动端随意拉动 -->
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>detail</title>
	<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
	
	

	<link rel="stylesheet" href="../css/common.css">

	<style type="text/css">
	/*卖家姓名首字母的圆圈*/
	.surname {
		border-radius: 50%;
		background-color: #61b88e;
		width: 36px;
		height: 36px;
		text-align: center;
		display: inline-block;


	}
	/*圆圈里面的文字*/
	.surname .surname-text {
		display: inline-block;
		line-height: 36px;
		color: #fff; 
		font-size: 16px;

	}

	.user-left .user-info {
		position: relative;
	}

	.user-info .user-name {
		position: absolute;
		top: 10px;
		left: 60px;

	}
	
	.infolist .info-wrapper [class^="item-"]{
		display: inline-block;
		
	}
	.infolist .info-wrapper .item-way {
		width: 180px;
	}
	.infolist .info-wrapper .item-info {
		width: 50%;
	}
	.infolist .info-wrapper .item-set {
		width: 50px;
	}

	.infolist .info-wrapper i {
		display: inline-block;
		width: 30px;
		height: 30px;
		background: url(../img/sprite-icon.png) no-repeat left top;
	}
	.infolist .add-payway {
	 
	  text-align: right;
	}
</style>
</head>
<body>
	<header id="header"></header>


	<section>
		
		<div class="container">
			<div class="row">
				<div class="user-left col-md-4">
					<ul class="list-group">
						<li class="list-group-item user-info">

							<div class="surname">
								<span class="surname-text">佛</span>
							</div>
							<div class="user-name">
								<span>佛山黄飞鸿</span>
								<p class="text-muted">UID：<span>36502453</span></p>
							</div>
						</li>
						<li class="list-group-item">
							<p >总成单：<span class="text-muted">0次</span></p>
						</li>
						<li class="list-group-item">
							<p>本账号于<span class="text-muted">2018-03-26 16:08:03</span>注册</p>
						</li>

					</ul>
				</div>
				<div class="user-right col-md-8">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h2 class="panel-title">账户与安全</h2>
						</div>
						<div class="panel-body">
							<ul class="list-group infolist">
								<li class="list-group-item">
									<div class="info-wrapper">
										<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
										<span class="item-way">邮箱</span>
										<span class="item-info">未绑定</span>
										<a href="#" class="item-set">绑定</a>
									</div>

								</li>
								<li class="list-group-item">
									<div class="info-wrapper">
										<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
										<span class="item-way">手机</span>
										<span class="item-info text-muted">13790089050</span>
										<!-- <a href="#" class="item-set">已绑定</a> -->
										<span class="item-set">已绑定</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="info-wrapper">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
										<span class="item-way">登录密码</span>
										<span class="item-info text-muted">*****</span>

										<a href="#" class="item-set">修改</a>
									</div>
								</li>
								<li class="list-group-item">
									<div class="info-wrapper">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
										<span class="item-way">资金密码</span>
										<span class="item-info text-muted">*****</span>

										<a href="#" class="item-set">修改</a>
									</div>
								</li>

							</ul>
						</div>
					</div>
					<!-- 绑定支付方式-->

					<div class="panel panel-default">

						<div class="panel-heading">
							<h2 class="panel-title">支付方式</h2>
						</div>
						<div class="panel-body">
							<p class="text-muted">请务必绑定您本人的实名账户，设置您的支付方式</p>
							
						</div>

						<!-- List group -->
						<ul class="list-group infolist">
							<li class="list-group-item">
								<div class="info-wrapper">
									<i class="aili-icon"></i>
									<span class="item-way">支付宝</span>
									<span class="item-info text-muted">13226938410 李森峰</span>

									<a href="#" class="item-set">修改</a>
									<a href="#" class="item-set">删除</a>
								</div>
							</li>
							<li class="list-group-item">
								<p class="add-payway"><a href="#">添加支付方式</a></p>
							</li>
							
						</ul>
					</div>
					<!-- /绑定支付方式-->

				</div>
			</div>
		</div>
	</section>


	<footer id="footer"></footer>
	<!-- 底部内容end -->
	<script src="../lib/jquery/jquery-2.1.1.js"></script>
	<script src="../lib/bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(function () {

			$('#header').load('../common/nav.html');
			$('#footer').load('../common/footer.html');




		})
	</script>
</body>
</html>